<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册</title>
    <script src="https://lib.baomitu.com/vue/2.6.12/vue.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.0/axios.min.js"></script>
    <style>
        span{
            color : red;
        }
    </style>

</head>
<body>
<h1>注册</h1>
<div id="app" style="width: 500px;margin: auto">
    账号:<input type="number" v-model="accountid">
        <span v-text="errorMsg.accountid"></span><br>
    金额:<input type="number" v-model="balance">
        <span v-text="errorMsg.balance"></span><br>
    名称:<input v-model="name">
    <span v-text="errorMsg.name"></span><br>
    密码:<input type="password" v-model="pwd">
    <span v-text="errorMsg.pwd"></span><br>
    时间:<input type="datetime-local" v-model="regtime">
    <span v-text="errorMsg.regtime"></span><br>
    邮箱:<input type="email" v-model="email">
    <span v-text="errorMsg.email"></span><br>
    <button @click="register">注册</button>
</div>

<script>
    var v = new Vue({
        el:"#app",
        data : {
            accountid:"",
            balance:0 ,
            name:"",
            pwd:"" ,
            regtime:"",
            email:"" ,
            errorMsg : {
                accountid : "",
                balance: "",
                name:"",
                pwd:"" ,
                regtime:"",
                email:""}
        },
        methods : {
            register(){
                var params = new URLSearchParams();
                params.append("accountid",this.accountid);
                params.append("balance",this.balance);
                params.append("name",this.name);
                params.append("pwd",this.pwd);
                params.append("regtime",this.regtime);
                params.append("email",this.email);
                axios.post("reg.do", params).then(res=>{
                    //alert(res.data.msg);
                    if(res.data.code == 1 ){
                        alert("注册成功!");
                        location.href = "login.html";
                    } else {
                        console.info(res.data.data); // ==> [ {field,defaultMesssge},{},{}]
                    }
                    // 重置报错信息
                    this.errorMsg.accountid = this.getErrorMsg(res.data.data, "accountid");
                    this.errorMsg.balance = this.getErrorMsg(res.data.data, "balance");
                    this.errorMsg.name = this.getErrorMsg(res.data.data, "name");
                    this.errorMsg.pwd = this.getErrorMsg(res.data.data, "pwd");
                    this.errorMsg.regtime = this.getErrorMsg(res.data.data, "regtime");
                    this.errorMsg.email = this.getErrorMsg(res.data.data, "email");
                })
            },
            getErrorMsg(errors, field){
                var msg = "";
                if(Array.isArray(errors)){
                    for (let error of errors) {
                        if(error.field == field){
                            msg += msg == '' ? '' : ',';
                            msg += error.defaultMessage;
                        }
                    }
                }
                return msg;
            }
        }

    })



</script>

</body>
</html>